<template>
  <div class="chat-container">
    <!-- 侧边栏 -->
    <div class="chat-sidebar" :class="{ collapsed: sidebarCollapsed }">
      <!-- 侧边栏头部 -->
      <div class="sidebar-header">
        <div class="persona-selector">
          <el-dropdown trigger="click" @command="handlePersonaChange">
            <div class="current-persona">
              <el-avatar
                :src="currentPersona?.avatar"
                :size="32"
                class="persona-avatar"
              >
                {{ currentPersona?.name?.charAt(0) }}
              </el-avatar>
              <div class="persona-info">
                <span class="persona-name">{{
                  currentPersona?.name || "选择人格"
                }}</span>
                <span class="persona-desc">{{
                  currentPersona?.description || "请选择一个人格"
                }}</span>
              </div>
              <el-icon class="dropdown-icon">
                <ArrowDown />
              </el-icon>
            </div>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="persona in personas"
                  :key="persona.id"
                  :command="persona.id"
                  :class="{ active: persona.id === currentPersona?.id }"
                >
                  <div class="persona-option">
                    <el-avatar :src="persona.avatar" :size="24">
                      {{ persona.name.charAt(0) }}
                    </el-avatar>
                    <div class="persona-details">
                      <span class="name">{{ persona.name }}</span>
                      <span class="desc">{{ persona.description }}</span>
                    </div>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item divided command="manage">
                  <el-icon><Setting /></el-icon>
                  管理人格
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <div class="sidebar-actions">
          <el-button
            type="primary"
            :icon="Plus"
            size="small"
            @click="createNewSession"
          >
            新对话
          </el-button>
          <el-button :icon="Fold" size="small" @click="toggleSidebar" />
        </div>
      </div>

      <!-- 会话列表 -->
      <div class="session-list">
        <div class="session-search">
          <el-input
            v-model="searchQuery"
            placeholder="搜索对话..."
            :prefix-icon="Search"
            size="small"
            clearable
          />
        </div>

        <el-scrollbar class="session-scrollbar">
          <div class="session-items">
            <div
              v-for="session in filteredSessions"
              :key="session.id"
              class="session-item"
              :class="{ active: session.id === currentSession?.id }"
              @click="selectSession(session.id)"
            >
              <div class="session-content">
                <div class="session-title">{{ session.title }}</div>
                <div class="session-preview">
                  {{ session.lastMessage?.content || "暂无消息" }}
                </div>
                <div class="session-time">
                  {{ formatTime(session.updatedAt) }}
                </div>
              </div>

              <el-dropdown
                trigger="click"
                @command="(cmd) => handleSessionAction(cmd, session)"
              >
                <el-button :icon="MoreFilled" size="small" text />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="rename">
                      <el-icon><Edit /></el-icon>
                      重命名
                    </el-dropdown-item>
                    <el-dropdown-item command="export">
                      <el-icon><Download /></el-icon>
                      导出
                    </el-dropdown-item>
                    <el-dropdown-item command="archive">
                      <el-icon><FolderOpened /></el-icon>
                      归档
                    </el-dropdown-item>
                    <el-dropdown-item command="delete" divided>
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <!-- 主聊天区域 -->
    <div class="chat-main">
      <!-- 聊天头部 -->
      <div class="chat-header">
        <div class="chat-title">
          <h2>{{ currentSession?.title || "选择或创建对话" }}</h2>
          <span class="message-count">{{ messages.length }} 条消息</span>
        </div>

        <div class="chat-actions">
          <el-button :icon="Search" size="small" @click="showSearchDialog">
            搜索
          </el-button>
          <el-button
            :icon="Download"
            size="small"
            @click="exportCurrentSession"
          >
            导出
          </el-button>
          <el-button :icon="Setting" size="small" @click="showSettings">
            设置
          </el-button>
        </div>
      </div>

      <!-- 消息列表 -->
      <div class="chat-messages" ref="messagesContainer">
        <el-scrollbar ref="messagesScrollbar" class="messages-scrollbar">
          <div class="messages-content">
            <!-- 欢迎消息 -->
            <div v-if="messages.length === 0" class="welcome-message">
              <div class="welcome-avatar">
                <el-avatar :src="currentPersona?.avatar" :size="64">
                  {{ currentPersona?.name?.charAt(0) || "AI" }}
                </el-avatar>
              </div>
              <div class="welcome-text">
                <h3>你好！我是 {{ currentPersona?.name || "AI助手" }}</h3>
                <p>
                  {{ currentPersona?.greeting || "有什么可以帮助你的吗？" }}
                </p>
              </div>
            </div>

            <!-- 消息列表 -->
            <div
              v-for="message in messages"
              :key="message.id"
              class="message-item"
              :class="{
                'user-message': message.role === 'user',
                'ai-message': message.role === 'assistant',
              }"
            >
              <div class="message-avatar">
                <el-avatar
                  v-if="message.role === 'user'"
                  :src="currentUser?.avatar"
                  :size="32"
                >
                  {{ currentUser?.username?.charAt(0) || "U" }}
                </el-avatar>
                <el-avatar v-else :src="currentPersona?.avatar" :size="32">
                  {{ currentPersona?.name?.charAt(0) || "AI" }}
                </el-avatar>
              </div>

              <div class="message-content">
                <div class="message-header">
                  <span class="message-sender">
                    {{
                      message.role === "user"
                        ? currentUser?.username || "用户"
                        : currentPersona?.name || "AI助手"
                    }}
                  </span>
                  <span class="message-time">{{
                    formatTime(message.createdAt)
                  }}</span>
                </div>

                <div class="message-body">
                  <!-- 文本消息 -->
                  <div v-if="message.type === 'text'" class="text-message">
                    <div v-html="formatMessageContent(message.content)"></div>
                  </div>

                  <!-- 图片消息 -->
                  <div
                    v-else-if="message.type === 'image'"
                    class="image-message"
                  >
                    <el-image
                      :src="message.content"
                      :preview-src-list="[message.content]"
                      fit="cover"
                      class="message-image"
                    />
                  </div>

                  <!-- 文件消息 -->
                  <div v-else-if="message.type === 'file'" class="file-message">
                    <div class="file-info">
                      <el-icon class="file-icon"><Document /></el-icon>
                      <div class="file-details">
                        <span class="file-name">{{ message.fileName }}</span>
                        <span class="file-size">{{
                          formatFileSize(message.fileSize)
                        }}</span>
                      </div>
                      <el-button
                        :icon="Download"
                        size="small"
                        @click="downloadFile(message)"
                      />
                    </div>
                  </div>

                  <!-- 附件 -->
                  <div
                    v-if="message.attachments?.length"
                    class="message-attachments"
                  >
                    <div
                      v-for="attachment in message.attachments"
                      :key="attachment.id"
                      class="attachment-item"
                    >
                      <el-image
                        v-if="attachment.type.startsWith('image/')"
                        :src="attachment.url"
                        :preview-src-list="[attachment.url]"
                        fit="cover"
                        class="attachment-image"
                      />
                      <div v-else class="attachment-file">
                        <el-icon><Document /></el-icon>
                        <span>{{ attachment.name }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 消息操作 -->
                <div class="message-actions">
                  <el-button
                    :icon="CopyDocument"
                    size="small"
                    text
                    @click="copyMessage(message)"
                  />
                  <el-button
                    v-if="message.role === 'assistant'"
                    :icon="Refresh"
                    size="small"
                    text
                    @click="regenerateMessage(message.id)"
                  />
                  <el-button
                    :icon="Edit"
                    size="small"
                    text
                    @click="editMessage(message)"
                  />
                  <el-button
                    :icon="Delete"
                    size="small"
                    text
                    @click="deleteMessage(message.id)"
                  />
                </div>
              </div>
            </div>

            <!-- 正在输入指示器 -->
            <div v-if="isTyping" class="typing-indicator">
              <div class="typing-avatar">
                <el-avatar :src="currentPersona?.avatar" :size="32">
                  {{ currentPersona?.name?.charAt(0) || "AI" }}
                </el-avatar>
              </div>
              <div class="typing-content">
                <div class="typing-dots">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>

      <!-- 输入区域 -->
      <div class="chat-input">
        <!-- 附件预览 -->
        <div v-if="attachments.length" class="attachment-preview">
          <div
            v-for="(file, index) in attachments"
            :key="index"
            class="attachment-item"
          >
            <div class="attachment-content">
              <el-image
                v-if="file.type.startsWith('image/')"
                :src="getFilePreview(file)"
                fit="cover"
                class="attachment-thumb"
              />
              <div v-else class="file-thumb">
                <el-icon><Document /></el-icon>
              </div>
              <span class="attachment-name">{{ file.name }}</span>
            </div>
            <el-button
              :icon="Close"
              size="small"
              text
              @click="removeAttachment(index)"
            />
          </div>
        </div>

        <!-- 输入框 -->
        <div class="input-container">
          <div class="input-actions">
            <el-upload
              :show-file-list="false"
              :before-upload="handleFileUpload"
              multiple
              accept="image/*,audio/*,video/*,.pdf,.doc,.docx,.txt"
            >
              <el-button :icon="Paperclip" size="small" text />
            </el-upload>

            <el-button
              :icon="Microphone"
              size="small"
              text
              @click="toggleVoiceInput"
            />
          </div>

          <el-input
            v-model="inputText"
            type="textarea"
            :rows="1"
            :autosize="{ minRows: 1, maxRows: 4 }"
            placeholder="输入消息... (Shift+Enter 换行，Enter 发送)"
            @keydown="handleKeyDown"
          />

          <div class="send-actions">
            <el-button
              type="primary"
              :icon="Position"
              :loading="sending"
              :disabled="!canSend"
              @click="sendMessage"
            >
              发送
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索对话框 -->
    <el-dialog v-model="searchDialogVisible" title="搜索消息" width="600px">
      <div class="search-dialog">
        <el-input
          v-model="searchKeyword"
          placeholder="输入关键词搜索消息..."
          :prefix-icon="Search"
          @keyup.enter="performSearch"
        />

        <div class="search-results">
          <div
            v-if="searchResults.length === 0 && searchKeyword"
            class="no-results"
          >
            未找到相关消息
          </div>

          <div
            v-for="result in searchResults"
            :key="result.id"
            class="search-result-item"
            @click="jumpToMessage(result.id)"
          >
            <div class="result-content">{{ result.content }}</div>
            <div class="result-meta">
              <span class="result-sender">{{
                result.role === "user" ? "用户" : "AI"
              }}</span>
              <span class="result-time">{{
                formatTime(result.createdAt)
              }}</span>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="searchDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="performSearch">搜索</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  ArrowDown,
  Plus,
  Fold,
  Search,
  MoreFilled,
  Edit,
  Download,
  FolderOpened,
  Delete,
  Setting,
  Document,
  CopyDocument,
  Refresh,
  Close,
  Paperclip,
  Microphone,
  Position,
} from "@element-plus/icons-vue";
import { useChat } from "@/composables/useChat";
import { useAuth } from "@/composables/useAuth";
import { useAppStore } from "@/stores/app";
import { formatTime, formatFileSize, copyToClipboard } from "@/utils";
import type { ChatMessage, ChatSession } from "@/types/chat";

const router = useRouter();
const appStore = useAppStore();
const { currentUser } = useAuth();
const {
  loading,
  sending,
  inputText,
  isTyping,
  attachments,
  currentSession,
  messages,
  sessions,
  personas,
  currentPersona,
  sendMessage: sendChatMessage,
  createSession,
  selectSession: selectChatSession,
  deleteSession,
  switchPersona,
  regenerateMessage: regenerateChatMessage,
  editMessage: editChatMessage,
  deleteMessage: deleteChatMessage,
  addAttachment,
  removeAttachment,
  clearAttachments,
  scrollToBottom,
  searchMessages,
  exportSession,
} = useChat();

// 组件状态
const messagesContainer = ref<HTMLElement>();
const messagesScrollbar = ref();
const searchQuery = ref("");
const searchDialogVisible = ref(false);
const searchKeyword = ref("");
const searchResults = ref<ChatMessage[]>([]);
const sidebarCollapsed = ref(false);

// 计算属性
const filteredSessions = computed(() => {
  if (!searchQuery.value) return sessions.value;

  return sessions.value.filter(
    (session) =>
      session.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      session.lastMessage?.content
        .toLowerCase()
        .includes(searchQuery.value.toLowerCase()),
  );
});

const canSend = computed(() => {
  return (
    (inputText.value.trim() || attachments.value.length > 0) && !sending.value
  );
});

// 方法
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value;
  appStore.setSidebarCollapsed(sidebarCollapsed.value);
};

const handlePersonaChange = async (personaId: string) => {
  if (personaId === "manage") {
    router.push("/persona");
    return;
  }

  await switchPersona(personaId);
};

const createNewSession = async () => {
  await createSession();
};

const selectSession = async (sessionId: string) => {
  await selectChatSession(sessionId);
  await scrollToBottom();
};

const handleSessionAction = async (action: string, session: ChatSession) => {
  switch (action) {
    case "rename":
      await renameSession(session);
      break;
    case "export":
      await exportSession(session.id);
      break;
    case "archive":
      await archiveSession(session);
      break;
    case "delete":
      await confirmDeleteSession(session);
      break;
  }
};

const renameSession = async (session: ChatSession) => {
  try {
    const { value } = await ElMessageBox.prompt(
      "请输入新的对话标题",
      "重命名对话",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: session.title,
      },
    );

    if (value) {
      // TODO: 调用重命名API
      ElMessage.success("重命名成功");
    }
  } catch {
    // 用户取消
  }
};

const archiveSession = async (session: ChatSession) => {
  try {
    await ElMessageBox.confirm("确定要归档这个对话吗？", "归档对话", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "info",
    });

    // TODO: 调用归档API
    ElMessage.success("对话已归档");
  } catch {
    // 用户取消
  }
};

const confirmDeleteSession = async (session: ChatSession) => {
  try {
    await ElMessageBox.confirm(
      "确定要删除这个对话吗？删除后无法恢复。",
      "删除对话",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    );

    await deleteSession(session.id);
  } catch {
    // 用户取消
  }
};

const sendMessage = async () => {
  if (!canSend.value) return;

  await sendChatMessage();
  await scrollToBottom();
};

const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    sendMessage();
  }
};

const handleFileUpload = (file: File) => {
  addAttachment(file);
  return false; // 阻止自动上传
};

const getFilePreview = (file: File) => {
  return URL.createObjectURL(file);
};

const toggleVoiceInput = () => {
  // TODO: 实现语音输入
  ElMessage.info("语音输入功能开发中...");
};

const copyMessage = async (message: ChatMessage) => {
  const success = await copyToClipboard(message.content);
  if (success) {
    ElMessage.success("消息已复制到剪贴板");
  } else {
    ElMessage.error("复制失败");
  }
};

const regenerateMessage = async (messageId: string) => {
  await regenerateChatMessage(messageId);
};

const editMessage = async (message: ChatMessage) => {
  try {
    const { value } = await ElMessageBox.prompt("编辑消息内容", "编辑消息", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputValue: message.content,
      inputType: "textarea",
    });

    if (value && value !== message.content) {
      await editChatMessage(message.id, value);
    }
  } catch {
    // 用户取消
  }
};

const deleteMessage = async (messageId: string) => {
  try {
    await ElMessageBox.confirm("确定要删除这条消息吗？", "删除消息", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    await deleteChatMessage(messageId);
  } catch {
    // 用户取消
  }
};

const downloadFile = (message: ChatMessage) => {
  // TODO: 实现文件下载
  ElMessage.info("文件下载功能开发中...");
};

const formatMessageContent = (content: string) => {
  // 简单的Markdown渲染
  return content
    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
    .replace(/\*(.*?)\*/g, "<em>$1</em>")
    .replace(/`(.*?)`/g, "<code>$1</code>")
    .replace(/\n/g, "<br>");
};

const showSearchDialog = () => {
  searchDialogVisible.value = true;
};

const performSearch = async () => {
  if (!searchKeyword.value.trim()) return;

  searchResults.value = await searchMessages(
    searchKeyword.value,
    currentSession.value?.id,
  );
};

const jumpToMessage = (messageId: string) => {
  // TODO: 跳转到指定消息
  searchDialogVisible.value = false;
  ElMessage.info("跳转到消息功能开发中...");
};

const exportCurrentSession = async () => {
  if (!currentSession.value) {
    ElMessage.warning("请先选择一个对话");
    return;
  }

  await exportSession(currentSession.value.id);
};

const showSettings = () => {
  router.push("/settings");
};

// 监听消息变化，自动滚动到底部
watch(
  () => messages.value.length,
  async () => {
    await nextTick();
    await scrollToBottom();
  },
);

// 组件挂载时初始化
onMounted(() => {
  sidebarCollapsed.value = appStore.sidebarCollapsed;
});

// 组件卸载时清理
onUnmounted(() => {
  clearAttachments();
});
</script>

<style scoped>
.chat-container {
  display: flex;
  height: 100vh;
  background: var(--el-bg-color-page);
}

/* 侧边栏样式 */
.chat-sidebar {
  width: 300px;
  background: var(--el-bg-color);
  border-right: 1px solid var(--el-border-color);
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

.chat-sidebar.collapsed {
  width: 0;
  overflow: hidden;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--el-border-color);
}

.persona-selector {
  margin-bottom: 12px;
}

.current-persona {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.current-persona:hover {
  border-color: var(--el-color-primary);
}

.persona-info {
  flex: 1;
  min-width: 0;
}

.persona-name {
  display: block;
  font-weight: 500;
  color: var(--el-text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.persona-desc {
  display: block;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-icon {
  color: var(--el-text-color-secondary);
}

.persona-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.persona-details {
  flex: 1;
  min-width: 0;
}

.persona-details .name {
  display: block;
  font-weight: 500;
}

.persona-details .desc {
  display: block;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.sidebar-actions {
  display: flex;
  gap: 8px;
}

.sidebar-actions .el-button {
  flex: 1;
}

.session-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.session-search {
  padding: 16px;
  border-bottom: 1px solid var(--el-border-color);
}

.session-scrollbar {
  flex: 1;
}

.session-items {
  padding: 8px;
}

.session-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 4px;
}

.session-item:hover {
  background: var(--el-fill-color-light);
}

.session-item.active {
  background: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary-light-7);
}

.session-content {
  flex: 1;
  min-width: 0;
}

.session-title {
  font-weight: 500;
  color: var(--el-text-color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.session-preview {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.session-time {
  font-size: 11px;
  color: var(--el-text-color-placeholder);
}

/* 主聊天区域样式 */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color);
}

.chat-title h2 {
  margin: 0;
  font-size: 18px;
  color: var(--el-text-color-primary);
}

.message-count {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.chat-actions {
  display: flex;
  gap: 8px;
}

.chat-messages {
  flex: 1;
  overflow: hidden;
}

.messages-scrollbar {
  height: 100%;
}

.messages-content {
  padding: 16px 24px;
}

.welcome-message {
  text-align: center;
  padding: 40px 20px;
}

.welcome-avatar {
  margin-bottom: 16px;
}

.welcome-text h3 {
  margin: 0 0 8px 0;
  color: var(--el-text-color-primary);
}

.welcome-text p {
  margin: 0;
  color: var(--el-text-color-secondary);
}

.message-item {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.message-item.user-message {
  flex-direction: row-reverse;
}

.message-item.user-message .message-content {
  background: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary-light-7);
}

.message-avatar {
  flex-shrink: 0;
}

.message-content {
  flex: 1;
  max-width: 70%;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  padding: 12px;
}

.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.message-sender {
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.message-time {
  font-size: 12px;
  color: var(--el-text-color-placeholder);
}

.message-body {
  margin-bottom: 8px;
}

.text-message {
  color: var(--el-text-color-regular);
  line-height: 1.6;
}

.image-message .message-image {
  max-width: 200px;
  border-radius: 6px;
}

.file-message .file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--el-fill-color-light);
  border-radius: 6px;
}

.file-icon {
  font-size: 24px;
  color: var(--el-text-color-secondary);
}

.file-details {
  flex: 1;
}

.file-name {
  display: block;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.file-size {
  display: block;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.attachment-item {
  border-radius: 6px;
  overflow: hidden;
}

.attachment-image {
  width: 80px;
  height: 80px;
}

.attachment-file {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--el-fill-color-light);
  border-radius: 4px;
  font-size: 12px;
}

.message-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

.message-item:hover .message-actions {
  opacity: 1;
}

.typing-indicator {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.typing-content {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  padding: 12px;
}

.typing-dots {
  display: flex;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--el-color-primary);
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

/* 输入区域样式 */
.chat-input {
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color);
  padding: 16px 24px;
}

.attachment-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--el-fill-color-extra-light);
  border-radius: 6px;
}

.attachment-preview .attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
}

.attachment-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.attachment-thumb {
  width: 24px;
  height: 24px;
  border-radius: 2px;
}

.file-thumb {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-fill-color-light);
  border-radius: 2px;
}

.attachment-name {
  font-size: 12px;
  color: var(--el-text-color-regular);
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-container {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.input-actions {
  display: flex;
  gap: 4px;
}

.input-container .el-textarea {
  flex: 1;
}

.send-actions {
  display: flex;
  gap: 4px;
}

/* 搜索对话框样式 */
.search-dialog {
  padding: 8px 0;
}

.search-results {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 16px;
}

.no-results {
  text-align: center;
  color: var(--el-text-color-secondary);
  padding: 40px 20px;
}

.search-result-item {
  padding: 12px;
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.search-result-item:hover {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.result-content {
  color: var(--el-text-color-regular);
  margin-bottom: 4px;
  line-height: 1.4;
}

.result-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1000;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }

  .chat-sidebar.collapsed {
    left: -300px;
  }

  .message-content {
    max-width: 85%;
  }

  .chat-header {
    padding: 12px 16px;
  }

  .messages-content {
    padding: 12px 16px;
  }

  .chat-input {
    padding: 12px 16px;
  }
}
</style>
